<template>
  <div class="app-container">
    <el-form ref="form" :model="postForm" label-width="120px">
      <el-row>
        <el-col :xs="24" :sm="12" :md="12" :lg="12">
          <el-form-item>
            <MDinput name="name" v-model="postForm.name" :maxlength="64">
              系统名称
            </MDinput>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12">
          <el-form-item>
            <MDinput name="url" v-model="postForm.url" :maxlength="255">
              系统IP地址、域名
            </MDinput>
          </el-form-item>
        </el-col>
      </el-row>
      <!--<el-row>-->
      <!--<el-col :span="12">-->
      <!--<el-form-item label="LOGO">-->
      <!--<el-input v-model="postForm.logo" placeholder="LOGO"></el-input>-->
      <!--</el-form-item>-->
      <!--</el-col>-->
      <!--<el-col :span="12">-->
      <!--<el-form-item label="系统正常开启">-->
      <!--<el-switch v-model="postForm.enable"></el-switch>-->
      <!--</el-form-item>-->
      <!--</el-col>-->
      <!--</el-row>-->
      <el-row>
        <el-col :spen="24">
          <el-form-item>
            <MDinput name="make" type="textarea" :rows="2" v-model="postForm.make" :maxlength="255">
              一句话系统简介
            </MDinput>
          </el-form-item>
        </el-col>
        <el-col :spen="24">
          <el-form-item>
            <MDinput name="remark" type="textarea" :rows="4" v-model="postForm.remark" :maxlength="255">
              系统介绍
            </MDinput>
          </el-form-item>
        </el-col>
        <!--<el-form-item>-->
        <!--<MDinput name="keywork" type="textarea" :rows="4" v-model="postForm.keywork" :maxlength="255">-->
        <!--SEO 关键字-->
        <!--</MDinput>-->
        <!--</el-form-item>-->
        <!--<el-form-item>-->
        <!--<MDinput name="seo" type="textarea" :rows="4" v-model="postForm.seo" :maxlength="255">-->
        <!--SEO 简介-->
        <!--</MDinput>-->
        <!--</el-form-item>-->
        <el-col :spen="24">
          <el-form-item>
            <MDinput name="addr" v-model="postForm.addr" :maxlength="64">
              联系地址
            </MDinput>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="12" :md="12" :lg="12">
          <el-form-item>
            <MDinput name="tel" v-model="postForm.tel" :maxlength="11">
              联系电话
            </MDinput>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12">
          <el-form-item>
            <MDinput name="qq" v-model="postForm.qq" :maxlength="11">
              联系QQ
            </MDinput>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="8" :md="8" :lg="8">
          <el-form-item>
            <MDinput name="adminDefPassword" v-model="postForm.adminDefPassword" :maxlength="11">
              管理账号默认密码
            </MDinput>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="8" :md="8" :lg="8">
          <el-form-item>
            <MDinput name="adminPwdMaxLength" type="number" v-model="postForm.adminPwdMaxLength">
              管理密码最大长度
            </MDinput>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="8" :md="8" :lg="8">
          <el-form-item>
            <MDinput name="adminPwdMinLength" type="number" v-model="postForm.adminPwdMinLength">
              管理密码最小长度
            </MDinput>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row v-show="false">
        <el-row>
          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-form-item>
              <el-checkbox v-model="postForm.adminKaptcha">后台登录验证码</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-form-item>
              <el-checkbox v-model="postForm.adminSmsCodeLogin">后台登录短信验证</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-form-item>
              <el-checkbox v-model="postForm.adminSmsCodeRegister">后台注册短信验证</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-form-item>
              <MDinput name="memberDebugMobile" v-model="postForm.memberDebugMobile" :maxlength="11">
                前端用户登录测试手机号
              </MDinput>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-form-item>
              <MDinput name="memberDefPassword" v-model="postForm.memberDefPassword">
                前端用户默认密码
              </MDinput>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-form-item>
              <MDinput name="memberTokenTime" v-model="postForm.memberTokenTime">
                前端用户登录过期时间,单位秒
              </MDinput>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-form-item>
              <el-checkbox v-model="postForm.memberLoginNotRegister">前端用户登录时账号不存在就注册新账号</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="16" :md="16" :lg="16">
            <el-form-item label="前端用户登录方式">
              <el-radio-group v-model="postForm.memberLoginType">
                <el-radio label="usernameAndPwd">用户名和密码</el-radio>
                <el-radio label="usernameAndPwdAndSms">用户名和密码与短信验证码</el-radio>
                <el-radio label="mobileAndSms">手机号和短信验证码</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-form-item>
              <el-checkbox v-model="postForm.memberKaptcha">前端用户登录验证码</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-form-item>
              <el-checkbox v-model="postForm.memberSmsCodeLogin">前端用户登录短信验证</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" :lg="8">
            <el-form-item>
              <el-checkbox v-model="postForm.memberSmsCodeRegister">前端用户注册短信验证</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :xs="24" :sm="12" :md="12" :lg="12">
          <el-form-item label="联系旺旺">
            <el-input v-model="postForm.qq" placeholder="联系旺旺"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12">
          <el-form-item label="淘宝店铺地址">
            <el-input v-model="postForm.taobaoShop" placeholder="淘宝店铺地址"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存配置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { get, update } from '@/api/sys/connSysAuthApi'
  import MDinput from '@/components/MDinput'
  import Sticky from '@/components/Sticky' // 粘性header组件
  const defaultForm = {
    'addr': undefined,
    'adminDefPassword': undefined,
    'adminKaptcha': false,
    'adminPwdMaxLength': 6,
    'adminPwdMinLength': 16,
    'adminSmsCodeLogin': false,
    'adminSmsCodeRegister': false,
    'enable': false,
    'ip': 0,
    'keywork': undefined,
    'logo': undefined,
    'make': undefined,
    'memberDebugMobile': undefined,
    'memberDefPassword': undefined,
    'memberKaptcha': false,
    'memberLoginNotRegister': false,
    'memberLoginType': 'usernameAndPwd',
    'memberSmsCodeLogin': false,
    'memberSmsCodeRegister': false,
    'memberTokenTime': 604800,
    'name': undefined,
    'qq': undefined,
    'remark': undefined,
    'seo': undefined,
    'taobaoShop': undefined,
    'tel': undefined,
    'url': undefined,
    'version': undefined,
    'vp': 0,
    'wangwang': undefined
  }

  export default {
    components: { MDinput, Sticky },
    data() {
      const validateRequire = (rule, value, callback) => {
        if (!value || value.length === 0) {
          callback(new Error('必填'))
        } else {
          callback()
        }
      }
      return {
        module: 'config',
        postForm: Object.assign({}, defaultForm),
        listLoading: false,
        rules: {
          name: [{ validator: validateRequire }],
          userType: [{ validator: validateRequire }]
        }
      }
    },
    created() {
      // this.getSite()
    },
    methods: {
      getSite() {
        this.listLoading = true
        get(this.module + '/site').then(res => {
          this.postForm = res.data
          this.listLoading = false
        })
      },
      onSubmit() {
        update(this.module + '/site', this.postForm).then(res => {
          let type = 'success'
          if (res.code !== 200) {
            type = 'error'
          }
          this.$notify({
            title: '提示!',
            message: res.message,
            type,
            duration: 2000
          })
        })
      }
    }
  }
</script>

<style scoped>
  .line {
    text-align: center;
  }
</style>

